<template>
  <!-- 商品列表页 -->
  <div class="product">
    <h4>商品信息</h4>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>名称</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(shopItem, shopIndex) in shopList" :key="shopIndex">
          <td>{{ shopItem.id }}</td>
          <td>{{ shopItem.name }}</td>
          <td>{{ shopItem.price }}</td>
          <td>
            <div class="add_btn" @click="addToCart(shopItem)">添加购物车</div>
          </td>
        </tr>
      </tbody>
    </table>
    <cart />
    <br />
    <info />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

import cart from "@/components/cart.vue";
import info from "@/components/info.vue";

export default {
  name: "product",
  components: {
    cart,
    info
  },
  data() {
    return {
      // shopList: [
      //   { id: 11, name: '鱼香肉丝', price: 12 },
      //   { id: 12, name: '宫爆鸡丁', price: 12 },
      //   { id: 13, name: '红烧猪蹄', price: 28 },
      //   { id: 14, name: '精致小菜', price: 10 },
      //   { id: 15, name: '米饭', price: 2 }
      // ]
    };
  },
  // 这个数据是从 product 组件剪切的，在 cart.js中拿回数据
  computed: {
    ...mapGetters(["shopList"])
  },
  methods: {
    ...mapActions(["addToCart"])
  }
};
</script>

<style lang="scss" scoped>
@import "@/sass/cart/product.scss";
</style>